<!--
 * @Author: gao_m3
 * @Date: 2020-10-23 17:03:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-27 20:17:05
 * @Descripttion: 第三方登录页
-->
<template>
  <div class="third-party">
    <div v-if="socials.length" class="other_loginway">
      {{ LANG.OTHER_LOGINWAY }}
    </div>
    <div class="login_icon" :class="{ right: socials.length < 9 }">
      <i
        v-if="erCodeVisible"
        icon-class="ACCOUNT"
        @click.native="accountLogin"
      />
      <fks-icon
        v-if="erCodeVisible"
        icon-class="PHONE"
        @click.native="phoneLogin"
      />
      <fks-icon
        v-for="item in arr"
        :key="item.key"
        :icon-class="item.key"
        @click.native="login(item)"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    erCodeVisible: {
      type: Boolean
    }
  },
  data() {
    return {
      arr: [],
      deleteArr: []
    }
  },
  computed: {
    socials() {
      return this.$store.state.loginStrategy.loginWays || []
    }
  },
  created() {
    this.arr = []
    this.arr = JSON.parse(JSON.stringify(this.socials))
  },
  methods: {
    //不同图标进入不同扫码页面
    login(item) {
      //判断扫码接口是否异常
      this.LoginSrc = `${this.VUE_APP_THIRD_PARTY_API}${item.key}`
      var xhr = new XMLHttpRequest()
      xhr.open('GET', this.LoginSrc, true)
      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            this.$emit('changeLoginType', item)
            this.arr.splice(this.arr.map((val) => val.key).indexOf(item.key), 1)
            this.deleteArr = []
            this.socials.forEach((item) => {
              if (
                JSON.stringify(this.arr).indexOf(JSON.stringify(item)) == -1
              ) {
                this.deleteArr.push(item)
              }
            })
            this.deleteArr.forEach((e) => {
              if (e.key != item.key) {
                this.arr.push(e)
              }
            })
          } else {
            this.$message.error(JSON.parse(xhr.response).message)
          }
        }
      }
      xhr.send(null)
    },
    //返回账号登录
    accountLogin() {
      this.$emit('toAccountLogin', 'STANDARD')
      this.arr = []
      this.arr = JSON.parse(JSON.stringify(this.socials))
    },
    //返回手机号登录
    phoneLogin() {
      this.arr = []
      this.arr = JSON.parse(JSON.stringify(this.socials))
      this.$emit('toPhoneLogin', 'SMS')
    }
  }
}
</script>

<style lang="scss">
.third-party {
  display: flex;
  margin-top: 24px;

  .other_loginway {
    min-width: 84px;
    height: 1.5rem;
    font-size: 14px;
    line-height: 1.5rem;
    color: #999;
  }

  .login_icon {
    flex: 1;

    svg {
      width: 30px;
      height: 30px;
      margin-left: 8px;
      cursor: pointer;

      &:first-child {
        margin: 0;
      }
    }
    i {
      cursor: pointer;
      width: 30px;
      height: 30px;
      margin-left: 24px;
      vertical-align: middle;
      font-size: 30px;
    }
  }

  .right {
    text-align: right;
  }
}
</style>
